<template>
  <div class="component-container">
     
    <div>
      <el-button @click="recOpen">打开录音权限</el-button>
      | <el-button @click="recStart">开始录音</el-button>
      <br>
      <el-button @click="recStop">结束录音</el-button>
      | <el-button @click="recPlay">本地试听</el-button>
    </div>
    <div style="padding-top: 5px">
      <!-- 波形绘制区域 -->
      <div style="border: 1px solid #ccc; display: inline-block; vertical-align: bottom">
        <div style="height: 100px; width: 300px" ref="recwave"></div>
      </div>
    </div>
  </div>
</template>
<script lang="tsx" setup>
import { PropType, ref, onBeforeMount } from 'vue';
import Recorder from 'js-audio-recorder';  

defineOptions({
  name: "Recorder",
});

let rec = null
let recBlob = null
async function recOpen() {
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true });
      console.log('录音权限已打开');
 
      rec = Recorder({
        type: 'wav',
        sampleRate: 16000,
        bitRate: 16,
        onProcess: (buffers, powerLevel, bufferDuration, bufferSampleRate) => {
          if (wave) {
            wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
          }
        },
      });
 
      if (recwave.value) {
        wave = Recorder.WaveView({ elem: recwave.value });
      }
 
      rec.open(
        () => {
          console.log('录音已打开');
        },
        (msg: any, isUserNotAllow: any) => {
          console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg);
        }
      );
    } catch (err) {
      console.error('无法打开录音权限:', err);
    }
  }

defineExpose({
  propertyValue
})
</script>
<style lang="scss" scoped>
.component-container{
  width: 100%;
  border-radius: 5px;
  padding: 5px;
  min-height: 80px;
  min-width: 400px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.query-box-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.query-element-group{
  display: flex;
  flex-wrap: wrap;
}
.query-element{
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 300px;
  padding: 5px 10px;
}
.query-element-label{
  font-size: 16px;
  font-weight: 500;
  flex: 2;
}
.query-element-value{
  flex: 7;
}
.right-query-box{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.right-query-btns{
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-evenly;
  height: 100%;
  ::v-deep(.el-button){
    display: block;
  }
}
::v-deep(.el-input__wrapper){
  max-width: 240px;
}
</style>